<template>
  <bd-popup
    class="custom"
    popupId="lotteryV3ChestReward"
    :weights="3"
    v-model:show="props.show"
    :style="{
      'background-color': 'transparent',
      overflow: 'initial',
    }"
    zIndex="999996"
    teleport="body"
    :overlay-style="{ background: 'rgba(0, 0, 0, 0.5)' }"
    :close-on-click-overlay="false"
  >
    <!-- 背景光环 -->
    <img class="gh" src="/image/inviteFriends/ferr-gh-icon.svg" />
    <!-- 蝴蝶结 -->
    <img class="hdj" src="/image/inviteFriends/free-hdj-icon.svg" />
    <!-- 容器 -->
    <div class="box">
      <div class="box-box">
        <div class="box-box-box">
          <!-- 标题 -->
          <div class="box-title">
            <!-- 容器背景 -->
            <img class="box-title-bg" src="/image/titlebg-icon.svg" />
            <!-- 标题 -->
            <div class="box-title-value">
              {{ $t("lotteryMoney.congratulations") }}
            </div>
          </div>
          <!-- 描述 -->
          <div class="box-desc">
            {{ $t("lotteryMoney.gxnhdxybx") }}
          </div>
          <!-- 卡片 -->
          <div class="box-card items-center">
            <div class="box-card-left">
              <div class="box-card-left-box items-center">
                <div class="box-card-left-title">
                  {{ $t("lotteryMoney.freeCard") }}
                </div>
              </div>
            </div>
            <div class="box-card-right items-center">
              <img
                class="box-card-right-bg"
                src="/image/lottery-v3/chest-cardbg-icon.svg"
              />
              <div class="box-card-right-title">
                *{{ source.freeDrawCount || 1 }}
              </div>
            </div>
          </div>
          <!-- 标题 -->
          <div class="box-fgx items-center">
            <div class="box-fgx-left"></div>
            <div class="box-fgx-center items-center">
              <img
                class="box-fgx-center-icon"
                src="/image/title-blue-icon.svg"
              />
              <div class="box-fgx-center-text">
                {{ $t("lotteryMoney.yyhyhd").split("xxx")[0] }}
                <span style="color: #007bff">{{
                  source.limitInviteUserCount || 1
                }}</span>
                {{ $t("lotteryMoney.yyhyhd").split("xxx")[1] }}
              </div>
              <img
                class="box-fgx-center-icon"
                src="/image/title-blue-icon.svg"
              />
            </div>
            <div class="box-fgx-right"></div>
          </div>
          <!-- 用户组 -->
          <div class="box-user items-center">
            <div
              class="box-user-item"
              v-for="index in source.limitInviteUserCount || 1"
              :key="index"
              :style="{
                'margin-left': index == 1 ? 0 : '20px',
              }"
            >
              <ImgNuxt
                v-if="
                  source.registerUserList && source.registerUserList[index - 1]
                "
                class="box-user-item-img"
                :src="
                  source.registerUserList[index - 1].avater ||
                  file.avatarDefault
                "
                :placeholder="file.avatarDefault"
                isHttp
              />
              <img
                v-else
                class="box-user-item-img"
                style="border: none"
                src="/image/lottery-v3/yy-zwt-icon.svg"
                @click.stop="shareApp"
              />
            </div>
          </div>
          <!-- 底部按钮 -->
          <div class="box-footer items-center" @click="confirm">
            <div class="box-footer-btn">
              {{
                $t(
                  source.recordStatus == 2
                    ? "lotteryMoney.fxghy"
                    : "lotteryMoney.receive"
                )
              }}
            </div>
            <img
              class="box-footer-record"
              src="/image/lottery-v3/yy-record-icon.svg"
              @click.stop="saveCopy"
            />
          </div>
        </div>
      </div>
      <!-- 底部按钮-背景 -->
      <img
        class="box-footer-bg"
        src="/image/lottery-v3/ferr-footerbg2-icon.svg"
      />
    </div>
    <!-- 关闭 -->
    <img
      class="close"
      src="/image/close-fff-icon.svg"
      @click.stop="closePopup"
    />
  </bd-popup>
</template>
<script setup lang="ts" name="chestPopup">
import { ref, reactive, onMounted, computed, nextTick } from "vue";
import { claimNewUserBonus } from "@/api/lottery";
import { useEventBus, useClipboard, useDateFormat } from "@vueuse/core";
import { useGlobalStore } from "~~/store/global";
import { useLotteryV3Store } from "~~/store/modules/lottery-v3";

const props = withDefaults(
  defineProps<{
    show: boolean;
    source: any;
  }>(),
  {
    show: false,
    source: {},
  }
);

const emit = defineEmits(["update:show", "confirm"]);
const { t } = useI18n();

const globalStore = useGlobalStore();
const lotteryStore = useLotteryV3Store();

const file = getOssFileUrl({
  avatarDefault: "/image/avatar-default.png",
  sharePage: "/invite-friends/v3/invite",
});

// 点击确认
const confirm = () => {
  // 2. 分享好友
  if (props.source.recordStatus == 2) {
    shareApp();
  }
  // 3. 领取
  else if (props.source.recordStatus == 3) {
    showLoadingToast({
      message: `${t("common.requestIng")}...`,
      forbidClick: true,
      duration: 15000,
    });

    claimNewUserBonus({
      sourceType: 2,
      prizeType: 8,
    }).then((res) => {
      if (res) {
        // 提示
        showToast({
          message: `${t("pledge.lqcg")},${t("lotteryMoney.mfxz")} *${
            res.freeDrawCount || 1
          }`,
          "z-index": 9999999,
        });
        // 传递: 用户全部可用免费次数
        emit("confirm", res.freeDrawCount);
      }
    });
  }
};

/****************** 复制 ******************/
// 分享地址
const shareUrl = computed(() => {
  return (
    file.sharePage +
    "?hiddenBar=1" +
    `&language=${globalStore.$state.language}` +
    `&packageId=${globalStore.$state.packageId}` +
    `&sourceType=12` +
    `&code=${lotteryStore.$state.inviteLotteryCode}`
  );
});

const saveCopy = () => {
  if (!file.sharePage) return;
  const { copy, isSupported } = useClipboard({
    source: "",
  });
  if (!isSupported.value) {
    showToast({
      message: t("mvp.other.bzcjtb"),
      "z-index": 9999999,
    });
  } else {
    copy(shareUrl.value);
    showToast({
      message: t("mvp.other.fzcg"),
      "z-index": 9999999,
    });
  }
};

/****************** 分享 ******************/
let shareLoading = false;
const shareApp = () => {
  if (shareLoading) return;
  try {
    shareLoading = true;
    console.log("分享地址:", shareUrl.value);
    bridge.onShare(t("lotteryMoney.hyzldmfcj"), shareUrl.value);
  } catch (error) {
    console.log(error);
  } finally {
    // 延时 1s，防止用户连续点击
    setTimeout(() => {
      shareLoading = false;
    }, 1000);
  }
};

// 关闭弹窗
const closePopup = () => {
  emit("update:show", false);
};

onMounted(() => {});

onBeforeUnmount(() => {});
</script>
<style lang="scss" scoped>
@keyframes scalebx {
  0% {
    transform: scale(1) translateX(-50%);
    opacity: 1;
  }
  35% {
    transform: scale(1.2) translateX(-50%);
    opacity: 0.3;
  }
  100% {
    transform: scale(0) translateX(-50%);
    opacity: 0;
  }
}
.gh {
  position: absolute;
  top: -92 * 2px;
  width: 100vw;
}
.hdj {
  position: absolute;
  z-index: 10;
  left: 50%;
  transform: translateX(-50%);
  top: -48 * 2px;
}
.box {
  position: relative;
  z-index: 9;
  margin: 0 40 * 2px;
  background: linear-gradient(90deg, #007bff 0.07%, #00b2ff 99.93%);
  border-radius: 12 * 2px;
  overflow: hidden;
  padding: 4 * 2px 4 * 2px 4 * 2px 4 * 2px;
  &-box {
    background: linear-gradient(0deg, #fff 59.68%, #fff6eb 100%);
    border-radius: 12 * 2px;
    overflow: hidden;
    padding: 4 * 2px 4 * 2px 0 4 * 2px;
    &-box {
      background: linear-gradient(0deg, #fff 59.68%, #fff6eb 100%);
      border-radius: 12 * 2px;
      overflow: hidden;
      padding: 10 * 2px 7 * 2px 0 7 * 2px;
      border: 1px solid #ffefdb;
      position: relative;
    }
  }
  &-title {
    width: 100%;
    height: 30 * 2px;
    position: relative;
    margin-bottom: 10 * 2px;
    &-bg {
      position: absolute;
      top: 0;
      height: 30 * 2px;
    }
    &-value {
      position: relative;
      z-index: 9;
      height: 30 * 2px;
      line-height: 30 * 2px;
      width: 100%;
      text-align: center;
      font-size: 15 * 2px;
      color: #fff;
      font-weight: 590;
    }
  }

  &-desc {
    text-align: center;
    font-size: 12 * 2px;
    color: #141924;
    margin-bottom: 10 * 2px;

    &-name {
      font-size: 15 * 2px;
      color: #007bff;
      font-weight: 590;
    }
  }

  &-chest {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    min-height: 130 * 2px;
    width: 190 * 2px;
    margin-top: 14 * 2px;
    margin-bottom: 5 * 2px;
    &-start {
      transform-origin: left;
      animation: scalebx 1s linear 0s forwards;
    }
  }

  &-card {
    position: relative;
    justify-content: space-between;
    height: 70 * 2px;
    margin-bottom: 20 * 2px;
    &-left {
      width: calc(100% - 40 * 2px);
      height: 100%;
      border: 4 * 2px solid #00b2ff;
      border-right-width: 0;
      padding: 3 * 2px;
      border-radius: 8 * 2px;
      background: linear-gradient(90deg, #e3f5ff 0%, #c7e3ff 100%);

      &-box {
        width: calc(100% - 20 * 2px);
        height: 100%;
        border-radius: 6 * 2px;
        padding: 2 * 2px 6 * 2px;
        flex-direction: column;
        justify-content: space-around;
        border: 0.7px solid rgba(75, 164, 255, 0.1);
        align-items: flex-start;
      }
      &-title {
        color: #002853;
        font-size: 12 * 2px;
        font-weight: 590;
        margin-bottom: 4 * 2px;
      }
      &-desc {
        color: #999da7;
        font-size: 11 * 2px;
        font-weight: 400;
      }
    }
    &-right {
      position: absolute;
      top: 0;
      right: 0;
      width: 65 * 2px;
      height: 100%;
      justify-content: center;

      &-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
      &-title {
        position: relative;
        z-index: 9;
        color: #ffe771;
        font-size: 17 * 2px;
        font-weight: 700;
      }
    }

    &-start {
      // transform-origin: left;
      // animation: scalebx 1s linear 0s forwards;
    }
  }

  &-fgx {
    // margin-bottom: 10 * 2px;
    &-left {
      width: 46 * 2px;
      height: 1px;
      background: linear-gradient(
        90deg,
        rgba(0, 123, 255, 0) 0%,
        rgba(0, 123, 255, 1) 100%
      );
    }
    &-center {
      &-icon {
        width: 9 * 2px;
        height: 9 * 2px;
        margin: 0 8 * 2px;
      }
      &-text {
        text-align: center;
        color: #141924;
        font-size: 12 * 2px;
        font-weight: 590;
      }
    }
    &-right {
      width: 46 * 2px;
      height: 1px;
      background: linear-gradient(
        90deg,
        rgba(0, 123, 255, 1) 0%,
        rgba(0, 123, 255, 0) 100%
      );
    }
  }

  &-user {
    justify-content: center;
    padding-top: 10 * 2px;
    &-item {
      border-radius: 100px;

      &-img {
        border: 1px solid rgba(0, 0, 0, 0.1);
        width: 40 * 2px;
        height: 40 * 2px;
        border-radius: 100px;
        overflow: hidden;
      }
    }
  }

  &-footer {
    position: relative;
    margin-top: -11 * 2px;
    justify-content: center;
    align-items: end;
    height: 93 * 2px;
    &-bg {
      position: absolute;
      bottom: 2 * 2px;
      z-index: 8;
      width: 100%;
      margin-left: -4 * 2px;
    }
    &-btn {
      position: relative;
      z-index: 9;
      border-radius: 100px;
      background: linear-gradient(270deg, #fb7f09 0.03%, #ffb901 99.97%);
      color: #fff;
      font-size: 15 * 2px;
      font-weight: 590;
      text-align: center;
      width: 100%;
      padding: 10 * 2px 12 * 2px;
      margin-bottom: 16 * 2px;
    }
    &-record {
      position: relative;
      z-index: 9;
      margin-bottom: 16 * 2px;
      width: 36 * 2px;
      height: 36 * 2px;
      margin-left: 10 * 2px;
    }
  }
}
.close {
  position: relative;
  z-index: 9;
  bottom: -30 * 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 30 * 2px;
  height: 30 * 2px;
}
</style>
